<template>
  <div class="common-layout">
    <el-container>
      <el-aside><Aside></Aside></el-aside>
      <el-container>
        <el-header><Header></Header></el-header>
        <el-main><router-view></router-view></el-main>
        <el-footer>基于Chrome</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script>

import {defineComponent} from "vue";
import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";

export default defineComponent({
  components: {Header, Aside}
})

</script>
<style>
.common-layout{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.el-header{

}
.el-aside{
  width: 300px;
  height: 100%
}
.el-main{
  height: 100%;

}
.el-footer{
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
